<template>
	<view class="search">
		<!-- <custom id='head' titleColor='#181818' navBackgroundColor='#FFFFFF' :style="{height:cusHeight+'px'}" textContent='人脸抓拍'></custom>
		 -->
		<view class="searchBox" :style="{height:cusHeight+'px'}">
			 <view class="statusBox" :style="{height:statusBarHeight+'px'}"></view>
			 <view class="contentBox" :style="{lineHeight: (cusHeight - statusBarHeight)+'px'}">
				 <view class="inputBox">
					<image src="../../static/img/search1.png"></image>
					<input placeholder="搜索内容"/>
				 </view>
				 <view class="cancel">取消</view>
			 </view>
		</view>
	
		<view class="content">
			<view class="contentHead">
				<view>搜索历史</view>
				<view class="clearBox">
					<image src="/static/img/del.png"></image>
					<view>清空</view>
				</view>
			</view>
			<view class="contetData">
				<view class="title">张三丰</view>
				<view class="title">地名</view>
				<view class="title">张洒洒水三丰</view>
				<view class="title">张三丰</view>
				<view class="title">地名</view>
				<view class="title">张洒洒水三丰</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import custom from '../../colorui/commonpent/custom.vue'
	export default {
		data() {
			return {
				
			}
		},
		components:{
			custom
		},
		onReady() {
			//systemInfomations.statusBarHeight
		},
		computed: {
			cusHeight() {
				return this.CustomBar;
			},
			statusBarHeight(){
				return this.StatusBar;
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.search{
	width: 100%;
	height: 100vh;
	background-color:  #F9F8FA;
	font-family: PingFang SC-Medium, PingFang SC;
	.content{
		.contetData{
			display: flex;
			margin: 1px 12px;
			flex-wrap: wrap;
			.title{
				padding: 4px 10px;
				background-color: #F1EEF3;
				border-radius: 5px;
				color: #666666;
				margin: 3px 6px;
			}
		}
		.contentHead{
			display: flex;
			justify-content: space-between;
			margin: 13px 18px;
			font-size: 16px;
			color: #000;
			font-weight: 500;
			.clearBox{
				display: flex;
				align-items: center;
				font-size: 14px;
				color:#0065D8;
				image{
					width: 14px;
					height: 15px;
					margin-right: 4px;
				}
			}
		}
	}
	
	.searchBox{
		width: 100%;
		background-color: #0065D8;
		
		.statusBox{
			width: 100%;
		}
		.contentBox{
			display: flex;
			
			  
			    margin: 0 4%;
				.inputBox{
					flex: 1;
					    display: flex;
					    align-items: center;
					    margin: 6px 0;
					    background-color: #fff;
					    border-radius: 20px;
						padding-left: 10px;
					image{
						width: 24px;
						height: 24px;
						margin-right: 6px;
					}
				}
			.cancel{
				font-size: 14px;
				    color: #fff;
				    width: 40px;
				    text-align: end;
			}
		}
	}
}
</style>
